<template>
  <div class="w-full h-full overflow-hidden overflow-y-auto box-border" v-if="props.account">
    
    <template v-for="role in roles" :key="role.id">
      <template v-if="!props.filter || role.role_name.indexOf(props.filter) > -1">
        <div 
          :class="`role-item-box rounded-[4px] p-[0_6px] w-full h-[50px] box-border overflow-hidden flex justify-between items-center cursor-pointer ${rolesChecks[(role as any).role_id] ? 'selected' : ''}`" 
          @click.stop="tirggerChecked(role)"
        >
          <div class="w-[calc(100%_-_32px)] h-full flex justify-start items-center pointer-events-none" >
            <div class="role-pic w-[32px] h-[32px] rounded-[50%] bg-[#e8eefd] flex justify-center items-center">
              <icon-user />
            </div>
            <div class="text-box w-[calc(100%_-_32px)] justify-center items-start pl-[12px] flex-col">
              <div class="w-full text-left clear-both"
                style="
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: normal;
                color: #465A80;
                "
              >{{ role.role_name }}</div>
              <div class="w-full text-leftclear-both " style="
              font-family: Microsoft YaHei;
              font-size: 12px;
              font-weight: normal;
              color: #A3B0CC;
              ">{{ role.role_desc }}</div>
            </div>
          </div>
          <div class="w-[32px] h-full flex justify-center items-center ">
            <!-- <a-link v-if="rolesChecks[role.role_name]" @click.stop="removeSelected(role.role_name)"> -->
            <a-link @click.stop="unbindUserRole(props.account, (role as any).role_id)">
              <template #icon>
                <icon-close  />
              </template>
            </a-link>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted, nextTick, type PropType } from 'vue';
import * as User from '@/api/user';
import * as Role from '@/api/roleManagement';
import { Message } from '@arco-design/web-vue';

const props = defineProps({
  account: {
    type: String,
    default: ''
  },
  roleId: {
    type: Number,
    default: undefined
  },
  disChecked: {
    type: Boolean,
    default: false
  },
  filter: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['checked', 'unbind'])

// 账号角色数据
const accountRoles = ref<User.TUserRoleItem[]>([])
const roles = ref<User.TRoleItem[]>([])
const rolesChecks = ref({})
const checked = ref<User.TRoleItem>()

function removeSelected(name: any) {
  // rolesChecks.value[name] = false
  for (let key in rolesChecks.value) {
    rolesChecks.value[key] = false
  }
  checked.value = undefined
}

function tirggerChecked(role: User.TRoleItem) {
  if (!role.role_name) return

  for (let key in rolesChecks.value) {
    rolesChecks.value[key] = false
  }
  rolesChecks.value[(role as any).role_id] = true
  checked.value = role
}

function unbindUserRole(account: string, role_id: number) {
  if (!account || !role_id) {
    Message.error('参数错误')
    return
  }
  User.userUnBindRoles(account, role_id).then(res => {
    if (res.code === 200) {
      Message.success('解绑成功')
      emits('unbind')
      return
    }
    Message.error('解绑失败')
  }).catch((e) => {
    const {code, message} = e
    if (code == 400 || code == 404) {
      Message.error(message)
    }
    
  })
}

function getAccountRoles() {
  User.getUserRoles(props.account, {
    page: 1, page_size: 1e2
  }).then(res => {
    if(res.code && res.data) {
      roles.value = res.data as any
      roles.value.forEach(item => {
        rolesChecks.value[item.id] = false
      })
      return
    }
    Message.error('获取账号角色失败')
  })
}

watch(checked, (val) => {
  emits('checked', { ...val })
})

watch(() => props.account, (val) => {
  if(val) {
    getAccountRoles()
  }
})

defineExpose({
  getRoles() {
    getAccountRoles()
  }
})
</script>

<style lang="less" scoped>
.role-item-box{
  margin-top: 6px;
}
.role-item-box:hover, .selected{
  background-color: #F0F4FA;
}
</style>
